<!-- 饼图 -->
<template>
  <div class="chart-container">
    <div ref="piechart" class="piechart"></div>
  </div>
</template>

<script>
require('echarts/theme/macarons') // echarts theme
import { formatDuration2 } from "@/utils/index.js";
export default {
  data() {
    return {};
  },
  props: {
    title: {
      type: String,
      default: "综合统计数据分析"
    },
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "100%" // 默认高度改为100%以自适应父容器
    },
    tooltip: {
      type: String,
      default: "数量"
    },
    chartData: {
      type: Array,
      required: true
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val)
      }
    }
  },
  created() { },
  mounted() {
    this.$nextTick(() => {
      this.myChart = this.$echarts.init(this.$refs.piechart, 'macarons');
      this.setOptions(this.chartData);
      // 监听窗口大小变化以重新渲染图表
      window.addEventListener('resize', this.handleResize);
    });
  },
  beforeDestroy() {
    // 移除窗口大小变化监听器
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    handleResize() {
      if (this.myChart) {
        this.myChart.resize();
      }
    },
    setOptions(chartData) {
      let that = this;
      var showData = [];
      var sum = 0, max = 0;
      chartData.forEach(item => {
        sum += item.value;
        if (item.value >= max) max = item.value;
      });
      // 放大规则
      var number = Math.round(max * 0.1);
      showData = chartData.map(item => {
        return {
          value: number + item.value,
          name: item.name,
          count: item.value,
          id: item.id
        };
      });
      this.myChart.setOption({
        title: {
          left: "center"
        },
        // 提示框
        tooltip: {
          trigger: "item",
          backgroundColor: '#fff',
          textStyle: { color: '#000' },
          formatter: function (param) {
            return param.name + '<br/>' + '总共：' + param?.data?.count;
          }
        },
        // 图例
        legend: {
          type: 'scroll',
          bottom: 5,
          formatter: function (name) {
            let singleData = chartData.filter(function (item) {
              return item.name == name;
            });
            return `${name}`;
          }
        },
        series: [
          {
            type: "pie",
            roseType: 'area',
            radius: [20, 120],
            data: showData,
            label: {
              normal: {
                show: true,
                formatter: function (param) {
                  return `${param.name}(${param?.data?.count})`;
                }
              }
            },
            labelLine: {
              length: 0,
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0
              }
            }
          }
        ]
      });
      this.myChart.off('click');
      this.myChart.on('click', (params) => {
        this.$emit('pieclick', params.name, this.title, params.data.id);
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.chart-container {
  display: flex;
  /* 使用弹性布局 */
  flex-direction: column;
  /* 垂直排列子元素 */
  height: 100%;
  /* 继承父组件高度 */
  width: 100%;
  /* 确保宽度填满父容器 */
}

.piechart {
  flex: 1;
  /* 占据全部可用高度 */
  width: 100%;
  /* 宽度填满容器 */
  min-height: 100px;
  /* 最小高度以确保图表可见 */
}</style>